@charset "utf-8";

$fontsize: 40;
@function r($px) {
    @return $px/$fontsize*1rem;
}

*{margin: 0;
  list-style: 0;
  padding: 0;
}
html{
    font-size: $fontsize;
}
html,body,.web{
    width: 100%;
    height:100%;
}
.swiper-container{
    width: 100%;
    height: 100%;
    position: relative;
}
.page{
    width: 100%;
    height: 100%;
    font-size: r(120);
    position: relative;
//  transition-duration: 2s;
        
}
.page1{
    background: deepskyblue;
    overflow: hidden;
    .sunny{width:r(200);
               height: r(200);
               display: inline-block;
               padding-left: r(20);
               padding-top: r(20);
               position: relative;
               img{width: 100%;height: 100%;
               animation: s1 10s infinite linear forwards;}
           
        }
        .sunny::before{
            content: "";
            width: r(70);
            height: r(70);
            display:block;
            top: r(90);
            left: r(80);
            box-shadow: r(5) r(5) r(300) #fee200;
            animation: s2 10s linear infinite;
            border-radius: 50%;
            background: transparent;
            position: absolute;
        }    
        
        .sunny::after{
            content: "";
            width: r(60);
            height: r(60);
            display:block;
            top: r(100);
            animation: s3 10s linear infinite;
            left: r(80);
            background: #f9f0f0;
            box-shadow: 1rem 0rem 0rem #f9f0f0,
             1rem 1rem 0rem 4px #f9f0f0, 
             2rem 1rem 0rem 3px #f9f0f0,
             0rem 0rem 0rem 1px #f9f0f0,
             -1rem 1rem 0rem 4px #f9f0f0,
             0rem 1rem 0rem #f9f0f0, 
             0rem 0rem 0rem 0px #f9f0f0;
            border-radius: 50%;
            position: absolute;
        }    
        .onepiece{width: r(600);
                  height: r(200);
                  margin: 0 auto;
                  img{width: 100%;height: 100%;}
                  }
        .head{
            width: r(50);
            height: r(140);
            position: absolute;
            top: r(270);
            left: r(370);
            img{width: 100%;height: 100%;}
        }
        .family{width: r(750);
                  height: r(450);       
                  img{width: 100%;height: 100%;}
                  }
        .board{
            width:r(500);
            height: r(400);
            position: absolute;
            right: r(-350);
            bottom: r(0);
            z-index: 9;
            animation: s4 10s linear infinite;
            img{width: 100%;height: 100%;}
            
        }          
        .sea{width:r(750);
            height: r(200);
            position: absolute;
            bottom:r(-100);
            
            border-radius:100%;
            background: #67bfff;
        }
        .beard{
            position: absolute;
            top: 0;
            z-index: 99;
            right: r(-565);
            width: r(750);
            height: r(350);
            animation: s5 10s linear infinite;
            animation-delay: 1.5s;
            img{width: 100%;height: 100%;}
        }
        .card{
            width: r(200);
            height: r(300);
            position: absolute;
            top: 0;
            animation: s6 10s linear infinite;
            animation-delay: 3s;
            right: r(150);
            transform: scale(0);
            img{height: 100%;
            width: 100%;}
        }
        .card:after{
            content: "";
            display:inline-block;
            width: r(200);
            height: r(300);
            top: r(20);
            left: r(500);
            position: absolute;
            background: url(../img/card1.jpg);
            background-size: 100% 100%; 
            animation: s7 10s linear infinite;
//          animation-delay: 3s;
        }
        .card:before{
            content: "";
            display:block;
            width: 100%;
            height: 100%;
            top: r(20);
            left: r(-500);
            position: absolute;
            background: url(../img/card3.jpg);
            background-size:cover; 
            animation: s8 10s cubic-bezier(0.58, -0.13, 0.51, 0.62) infinite;
//          animation-delay: 3s;
        }
       
       .circle{
           position: absolute;
           width: r(80);
           height: r(80);
           top: r(40);        
           right:5%;
           img{width: 100%;height: 100%;vertical-align: top;border-radius: 50%;}
       }
}

.page2{
    background: url(../img/bg1.jpg) no-repeat;
    background-size: 100% 100%;
    position: relative;
    height: 100%;
    .lufei{
        display: inline-block;
        width: r(600);
        height: r(700);
        padding-top: r(430);
        img{width: 100%;height: 100%;}
    }
    .font{
        position: absolute;
        height: r(350);
        width: 90%;
        top:r(40);
        left: 5%;
        img{width: 100%;height: 100%;}
        
    }
}
.page3{
    background: url(../img/bg2.jpg) no-repeat;
    background-size: 100% 100%;
    position: relative;
    
    .suolong{
        display: inline-block;
        width: 100%;
        height: r(500);
        padding-top: 90%;
        img{width: 100%;height: 100%;}
    }
    .font2{
        position: absolute;
        height: r(150);
        width: 90%;
        bottom:r(40);
        background: rgba(0,0,0,.5);
        left: 5%;
        transition-delay: 1.5s;
        img{width: 100%;height: 100%;}
    }
    .namei{
        position: absolute;
        height: r(500);
        width: r(300);
        top:r(40);
        left: 0%;
        img{width: 100%;height: 100%;}
        
    }
     .font3{
        position: absolute;
        height: r(250);
        width: 50%;
        top:r(100);
        
        background: rgba(0,0,0,.5);
        right: 3%;
        
        img{width: 100%;height: 100%;}
    }
    
    
}
   .page4{
    background: url(../img/bg3.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
        .lobin{
            position: absolute;
            width: 50%;
            height: r(600);
            top:r(40);
            left: 0%;
            img{width: 100%;height: 100%;}
        }
    }
    .border{
        position: absolute;
        top: r(50);
        right: 5%;
        height: r(400);
        width: r(350);
        img{width: 100%;height: 100%;}
    }
    .border1{
        position: absolute;
        bottom: r(50);
        left: 5%;
        height: r(400);
        width: r(350);
        img{width: 100%;height: 100%;}
    }
    .shanzhi{
            position: absolute;
            width: 50%;
            height: r(600);
            bottom:r(40);
            right: 0%;
            img{width: 100%;height: 100%;}
        }
    .font4{
        position: absolute;
        height: r(260);
        width: r(230);
        top:r(110);
        right: 13%;
        img{width: 100%;height: 100%;}
    }
     .font5{
        position: absolute;
        height: r(270);
        width: r(230);
        bottom:r(115);
        left: 13%;
        img{width: 100%;height: 100%;}
    }
    
    .page5{
    background: url(../img/bg4.jpg) no-repeat;
    background-size: 100% 100%;
    position: relative;
    .qiaoba1{
        width: r(170);
        height: r(270);
        position: absolute;
        top:r(60);
        left: 2%;
        z-index: 10;
        img{width: 100%;height: 100%;}
    }
    .qiaoba2{
        width: r(220);
        height: r(270);
        position: absolute;
        top:r(60);
        right: 2%;
        z-index: 9;
        img{width: 100%;height: 100%;}
    }
    .border3{
        position: absolute;
        height: r(200);
        width: r(400);
        top: r(130);
        left: 22%;
        img{width: 100%;height: 100%;}
    }
    .font6{
        position: absolute;
        height: r(150);
        width: r(350);
        top:r(170);
        right: 28%;
        img{width: 100%;height: 100%;}
    }
    .wusp{
        width: r(300);
        height: r(500);
        position: absolute;
        bottom:r(60);
        right: 15%;
        
        img{width: 100%;height: 100%;}
    }
     .border4{
        position: absolute;
        height: r(400);
        width: r(350);
        bottom: r(130);
        left: 10%;
        img{width: 100%;height: 100%;}
    }
    .font7{
        position: absolute;
        height: r(300);
        width: r(250);
        bottom:r(170);
        left: 18%;
        img{width: 100%;height: 100%;}
    }
    }
@keyframes s1{
    0%{
        transform: rotateZ(0);
       
    }
    100%{
        transform: rotateZ(360deg);
    }
}
.rotate10{
    animation: s17 infinite backwards linear;
}
@keyframes s17{
    0%{
        transform: rotate(0);
       
    }
    100%{
        transform: rotate(360deg);
    }
}
.scalehere{
    animation: s0 infinite;
}
@keyframes s0{
    0%{
        transform: scale(0.9);
       
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(0.9);
    }
}
@keyframes s2{
    0%{
        box-shadow: r(5) r(5) r(350) #fee200,
         r(5) r(5) r(300) #fee200,
          r(5) r(5) r(250) #fee200;
    }
      50%{
        box-shadow: r(5) r(5) r(100) #fee200,
        r(5) r(5) r(150) #fee200,
        r(5) r(5) r(200) #fee200,
        r(5) r(5) r(250) #fee200,
        r(5) r(5) r(300) #fee200,
        r(5) r(5) r(350) #fee200;
        
    }
    100%{
        box-shadow: r(5) r(5) r(350) #fee200;
    }
}
@keyframes s3{
    0%{
        transform: translateX(r(0));
       
    }
    50%{
          transform: translateX(r(100)); 
    }
    100%{
           transform: translateX(r(0));
    }
}
@keyframes s4{
    0%{
        transform: translateX(r(350));
       
    }
    100%{
        transform: translateX(r(-1200));
    }
}
@keyframes s5{
    0%{transform: translateX(r(0)) scale(0.2);
        
    
    }
   100%{
       transform: translateX(r(-1344)) scale(1.2);
   } 
   
}
@keyframes s6{
    0%   { transform: translate(r(200), r(0)) rotateX(-180deg) skewX(60deg) scale(0);}
//  50%{transform: translate(r(-350), r(320)) rotate(0deg) skewX(0deg);opacity: 1;}
    100% { transform: translate(r(-500), r(1340)) rotateX(180deg) skewX(-60deg) scale(1);}
   
}
@keyframes s7{
    0%   { transform: translate(r(-200), r(0)) rotateZ(-150deg) skewX(30deg) scale(0.5);}
//  50%{transform: translate(r(-350), r(320)) rotate(0deg) skewX(0deg);opacity: 1;}
    100% { transform: translate(r(-500), r(1340)) rotateZ(150deg) skewX(-30deg) scale(1.5);}
   
}
@keyframes s8{
    0%   { transform: translate(r(0)) rotateY(-180deg) skewX(-130deg) scale(0);}
//  50%{transform: translate(r(-350), r(320)) rotate(0deg) skewX(0deg);opacity: 1;}
    100% { transform: translate(r(1340)) rotateY(180deg) skewX(130deg) scale(0.8);}
   
}
.rotatex1{
    animation: s9 ;
   transform-origin: r(100) r(0);
   
}
.rotatex2{
    animation: s11 forwards; 
    opacity: 0;  
}
.scale1{
    animation: s10 ;
 
}
.scale2{
    animation: s12 forwards;
    opacity: 0;
}
@keyframes s9{
    0%{
       transform: rotateY(0); opacity: 0.5;
    }
    100%{
       transform: rotateY(1080deg);opacity: 1; 
    }
}
@keyframes s10{
    0%{
       transform: scale(0); opacity: 0.5;
    }
    100%{
       transform:scale(1);opacity: 1; 
    }
}

@keyframes s11{
    0%{
       transform: scale(0) rotate(0); opacity: 0.5;
       
    }
    100%{
       transform:scale(1) rotate(180deg);opacity: 1; 
    }
}
@keyframes s12{
    0%{
       transform: scale(0); opacity: 0.5;
       background:rgba(0,0,0,.8);
       
    }
    100%{
       transform:scale(1);opacity: 1; 
       background: rgba(225,225,225,0);
    }
}
.run1{
   animation: s13 forwards;
   opacity: 0;
}
.run2{
   animation: s14 forwards;
   opacity: 0;
}
.run3{
   animation: s16 forwards;
   opacity: 0;
}
@keyframes s13{
    0%{
       transform:translateX(r(150)) scale(0);
       
    }
    100%{
       transform: translateX(r(-10)) scale(1);
       opacity: 1;
    }
}
@keyframes s14{
    0%{
       transform:translateX(r(-150)) scale(0);
       
    }
    100%{
       transform: translateX(r(10)) scale(1);
    opacity: 1;
    }
}

@keyframes s16{
    0%{
       transform:scale(0) skew(180deg);opacity: 0.5;
       
    }
    100%{
       transform:scale(1) skew(0);opacity: 1;
    }
}
